import { useLazyPrescriptionQuery } from "@store/apiSlice/consultApiSlice";
import { ImageViewer } from "antd-mobile";
import React, { useState } from "react";

interface Props {
  id: string;
  children: React.ReactElement;
}

export default function ViewPrescription({ id, children }: Props) {
  // 用于实现获取处方单
  const [requestPrescription, { data }] = useLazyPrescriptionQuery();
  // 用于控制处方单图片是否显示
  const [visible, setVisible] = useState(false);
  // 点击查看处方时触发
  const prescriptionHandler = () => {
    requestPrescription(id).then(() => {
      setVisible(true);
    });
  };
  return (
    <>
      <div onClick={prescriptionHandler}>{children}</div>
      <ImageViewer
        image={data?.data.url}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
      />
    </>
  );
}